How do I use @font-face in CSS?

Once you’ve defined your font using @font-face, you can use it in your CSS just like any other font: There are different types of font with different extensions including: TrueType (ttf): This is a font format developed by Apple and Microsoft that is widely used on both Mac and Windows operating systems.

What is the @font-face rule?

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

What is @font-face at-rule?

The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule. Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.